<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <svg-icon icon-class="user" />
    <div ref="main" class="main" />
  </div>
</template>

<script>
import { getData } from '@/api/data'
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      option: {

        xAxis: {
          boundaryGap: false,
          data: []
        },
        yAxis: {},
        series: [
          {
            data: [],

            type: 'line',
            areaStyle: { color: '#4fe7de',
              opacity: 0.5 }
          }

        ]
      },
      myChart: null
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    option: {
      deep: true,
      handler() {
        this.setOption()
      }
    }
  },

  created() {
    this.getData()
  },
  mounted() {
    // var myChart = echarts.init(this.$refs.main)

    // myChart.setOption(this.option)
    this.myChart = echarts.init(this.$refs.main)
    this.setOption()
  },
  methods: {
    async getData() {
      const { socialInsurance: { xAxis, yAxis }} = await getData()
      this.option.xAxis.data = xAxis
      this.option.series[0].data = yAxis
      console.log(this.option.xAxis.data)
      console.log(this.option.series[0].data)
    },
    setOption() {
      this.myChart?.setOption(this.option)
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
      .main{
    width: 800px;
    height: 500px;
  }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }

}
</style>
